<template>
	<cu-refresh @loadmore="handleMore" @refresh="handleRefresh" :load="props.load" :height="height">
		<template v-slot:list>
			<view v-if="list && list.length > 0" class="cu-card case" :class="props.isCard ? 'no-card' : ''">
				<view class="cu-item shadow padding-sm" v-for="(item, index) in list" :key="index" :data-index="index"
					:data-value="item" @click="handleSelect">
					<view class="flex justify-between align-center padding-xs">
						<view>
							<text class="lg text-orange cuIcon-newshotfill"></text>
							<text class="margin-left-xs text-black text-size-16">{{ item.code }}</text>
						</view>
						<view class="cu-tag radius bg-orange text-white text-size-16">{{ getStatus(item.state) }}</view>
					</view>
					<view class="cu-line"></view>
					<view class="flex padding-left-xs margin-top-xs">
						<view class="text-size-16 flex-sub">
							<text class="cuIcon-locationfill text-green margin-right-xs"></text>
							<text>目的地：</text>
							<text>{{ item.endPositionName }}</text>
						</view>
					</view>
					<view class="flex padding-left-xs">
						<view class="text-size-16 flex-sub">
							<text class="cuIcon-profilefill text-green margin-right-xs"></text>
							<text>车辆：</text>
							<text>{{ item.plate }}</text>
							<text v-if="item.driverName" class="margin-left-xs">({{ item.driverName }})</text>
						</view>
					</view>
					<view class="flex padding-left-xs">
						<view class="text-size-16 flex-sub">
							<text class="cuIcon-goodsfill text-green margin-right-xs"></text>
							<text>货物：</text>
							<text class="margin-right-xs">{{ item.type }}</text>/
							<text class="margin-left-xs">{{ item.weight ? item.weight+'吨' : '暂无重量' }}</text>
						</view>
					</view>
					<view class="flex padding-left-xs">
						<view class="text-size-16 flex-sub">
							<text class="cuIcon-deliver text-green margin-right-xs"></text>
							<text>出库磅单：</text>
							<text v-if="item.bound==1">存在</text>
							<text v-else-if="item.bound==3">存在</text>
							<text v-else>缺失</text>
						</view>
						<view class="text-size-16 flex-sub">
							<text class="cuIcon-deliver_fill text-green margin-right-xs"></text>
							<text>入库磅单：</text>
							<text v-if="item.bound==2">存在</text>
							<text v-else-if="item.bound==3">存在</text>
							<text v-else>缺失</text>
						</view>
					</view>
					<view class="flex padding-left-xs" v-if="item.startTime">
						<view class="text-size-16 flex-sub">
							<text class="cuIcon-countdownfill text-green margin-right-xs"></text>
							<text>装货时间：</text>
							<text>{{ item.startTime }}</text>
						</view>
					</view>
					<view class="flex padding-left-xs" v-if="item.endTime">
						<view class="text-size-16 flex-sub">
							<text class="cuIcon-countdown text-green margin-right-xs"></text>
							<text>卸货时间：</text>
							<text>{{ item.endTime }}</text>
						</view>
					</view>
				</view>
			</view>
		</template>
	</cu-refresh>
</template>

<script setup lang="ts">
	import cuRefresh from '@/components/cu-refresh.vue'
	const emit = defineEmits(['action', 'loadmore', 'refresh']);
	const props = defineProps({
		isCard: {
			type: [Boolean, String],
			default: false
		},
		list: {
			default: function() {
				return []
			}
		},
		height: {
			type: String,
			default: '80vh'
		},
		load: {
			type: [Boolean, String],
			default: false
		}
	});
	const statusList = [{
			id: 0,
			cuIcon: 'usefullfill',
			name: '待装货'
		},
		{
			id: 1,
			cuIcon: 'radioboxfill',
			name: '待卸货'
		},
		{
			id: 2,
			cuIcon: 'roundclosefill',
			name: '待审核'
		},
		{
			id: 3,
			cuIcon: 'roundcheckfill',
			name: '已完成'
		}
	];
	const handleRefresh = (e: any) => {
		emit('refresh')
	}
	const handleMore = (e: any) => {
		emit('loadmore')
	}
	const getStatus = (e: number) => {
		const item = statusList.find(obj => {
			return obj.id == e;
		});
		if (item) {
			return item.name;
		} else {
			return '未知';
		}
	};
	const handleSelect = (e: any) => {
		emit('action', e.currentTarget.dataset.value);
	};
</script>

<style>
	.cu-item {
		margin-top: 0;
		border: 1px solid #efefef;
	}

	.cu-card>.cu-item {
		display: block;
		background-color: #ffffff;
		overflow: hidden;
		border-radius: 10rpx;
		margin: 0rpx 30rpx 30rpx 30rpx;
	}
</style>
